<template>
  <div class="container">
    <el-collapse-transition name="el-zoom-in-top">
      <DictTypeList
        v-show="ntype != 'edit'"
        @queryData="handlerQuery"
      ></DictTypeList>
    </el-collapse-transition>

    <el-collapse-transition name="el-zoom-in-bottom">
      <DictDataList
        v-if="ntype == 'edit'"
        @close="ntype = 'list'"
        :queryType="queryType"
        :dictName="dictName"
      ></DictDataList>
    </el-collapse-transition>
  </div>
</template>

<script>
import TableWrapper from "@/components/Table/TableWrapper.vue";
import DictTypeList from "./DictTypeList.vue";
import DictDataList from "./DictDataList.vue";

export default {
  components: { TableWrapper, DictTypeList, DictDataList },
  data() {
    return {
      ntype: "list",
      queryType: "",
      dictName: "",
    };
  },
  methods: {
    handlerQuery(ntype, queryType) {
      this.ntype = ntype;
      this.queryType = queryType.dictType;
      this.dictName = queryType.dictName;
    },
  },
};
</script>
